<template>
  <div>
    <div class="c-mb32 c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-hh200">
      <template v-if="isFreeGood == 1 && vipList[selectedIndex]">
        <!-- 原来礼包只能添加一个自定义的实体商品，改成可添加多个实体商品后，礼包实体商品giftRelates字段返回，旧数据还是按照原来的返回 -->
        <template v-if="vipList[selectedIndex].giftRelates && vipList[selectedIndex].giftRelates.length > 0">
          <div class="c-inlineblack c-mr30" @click="showGoodsList()">
            <div class="c-ww170 c-hh200 c-p">
              <div class="c-ww170 c-hh150 c-p-l0 c-pa c-pz10" :class="vipList[selectedIndex].giftRelates[0].relateCover?'c-p-b30':'c-p-b40'">
                <div class="c-ww170 c-hh150 c-p">
                  <img class="c-hh140 c-pa c-p-b0  c-pz10" :class="vipList[selectedIndex].giftRelates[0].relateCover?'c-ww150 c-br10 c-p-l10 box-shadow':'c-ww170 c-p-l0'"
                    :src="$addXossFilter(vipList[selectedIndex].giftRelates[0].relateCover, 'https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/mrgYje6xWQyxXzihm3rf9o7SnFMbGy767nmCfzF1.png')">
                </div>
              </div>
              <div class="c-ww170 c-hh70 c-p-b0 c-p-l0 c-pa c-pz100">
                <div class="c-ww170 c-hh70 c-p">
                  <div class="c-fc-white c-ww170 c-pa c-p-lp50 c-translate-x-50 c-ph10 c-p-t24 c-pz100">
                    <p class="c-fs24 c-textAlign-c c-text-ellipsis1 c-w100">实物赠品</p>
                  </div>
                  <img class="c-ww170 c-hh70 c-pa c-p-b0 c-p-l0 c-pz10"
                    :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/wqNIQ6OI5heuhir1CogAB6fq7HAAOs3c41KHOGn6.png')">
                </div>
              </div>
              <img class="c-ww170 c-hh140 c-pa c-p-b0 c-p-l0"
                :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/wtKTBhfHjWL6OByKSYLQlKNdo2jbkr637D7z4od5.png')">
            </div>
          </div>
        </template>
        <template v-else>
          <div class="c-inlineblack c-mr30" @click="getGoodsDetail()">
            <div class="c-ww170 c-hh200 c-p">
              <div class="c-ww170 c-hh150 c-p-l0 c-pa c-pz10" :class="vipList[selectedIndex].freeGoodImg?'c-p-b30':'c-p-b40'">
                <div class="c-ww170 c-hh150 c-p">
                  <img class="c-hh140 c-pa c-p-b0  c-pz10" :class="vipList[selectedIndex].freeGoodImg?'c-ww150 c-br10 c-p-l10 box-shadow':'c-ww170 c-p-l0'"
                    :src="$addXossFilter(vipList[selectedIndex].freeGoodImg, 'https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/mrgYje6xWQyxXzihm3rf9o7SnFMbGy767nmCfzF1.png')">
                </div>
              </div>
              <div class="c-ww170 c-hh70 c-p-b0 c-p-l0 c-pa c-pz100">
                <div class="c-ww170 c-hh70 c-p">
                  <div class="c-fc-white c-ww170 c-pa c-p-lp50 c-translate-x-50 c-ph10 c-p-t24 c-pz100">
                    <p class="c-fs24 c-textAlign-c c-text-ellipsis1 c-w100">{{vipList[selectedIndex].freeGoodName}}</p>
                  </div>
                  <img class="c-ww170 c-hh70 c-pa c-p-b0 c-p-l0 c-pz10"
                    :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/wqNIQ6OI5heuhir1CogAB6fq7HAAOs3c41KHOGn6.png')">
                </div>
              </div>
              <img class="c-ww170 c-hh140 c-pa c-p-b0 c-p-l0"
                :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/wtKTBhfHjWL6OByKSYLQlKNdo2jbkr637D7z4od5.png')">
            </div>
          </div>
        </template>
      </template>
      <div class="c-inlineblack c-mr30" v-if="getPoint">
        <div class="c-ww170 c-hh200 c-p">
          <div class="c-ww170 c-hh140 c-p-b40 c-p-l0 c-pa c-pz10">
            <div class="c-ww170 c-hh140 c-p">
              <img class="c-ww170 c-hh140 c-pa c-p-b0 c-p-l0 c-pz10"
                :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/mrgYje6xWQyxXzihm3rf9o7SnFMbGy767nmCfzF1.png')">
              <img src="../../../assets/i/wap/recommend/point.png" class="c-ww64 c-hh76 c-pa c-p-lp50 c-translate-x-50 c-p-t32 c-pz100" />
            </div>
          </div>
          <div class="c-ww170 c-hh70 c-p-b0 c-p-l0 c-pa c-pz100">
            <div class="c-ww170 c-hh70 c-p">
              <div class="c-fc-white c-ww170 c-pa c-p-lp50 c-translate-x-50 c-ph10 c-p-t24 c-pz100">
                <p class="c-fs24 c-textAlign-c c-text-ellipsis1 c-w100">奖励{{getPoint}}{{ customPointName }}</p>
              </div>
              <img class="c-ww170 c-hh70 c-pa c-p-b0 c-p-l0 c-pz10"
                :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/wqNIQ6OI5heuhir1CogAB6fq7HAAOs3c41KHOGn6.png')">
            </div>
          </div>
          <img class="c-ww170 c-hh140 c-pa c-p-b0 c-p-l0"
            :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/wtKTBhfHjWL6OByKSYLQlKNdo2jbkr637D7z4od5.png')">
        </div>
      </div>
      <div class="c-inlineblack c-mr30" v-for="(item, index) in vipList[selectedIndex].coupons" :key="index" v-if="getCouponCount && vipList[selectedIndex]">
        <div class="c-ww170 c-hh200 c-p">
          <div class="c-ww170 c-hh140 c-p-b40 c-p-l0 c-pa c-pz10">
            <div class="c-ww170 c-hh140 c-p">
              <img class="c-w100 c-h c-pa c-p-b0 c-p-l0 c-pz10"
                :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/pMfNIT7kPbm9SIrExCOHwAKInzSIGhhIkhBK2RMH.png')">
              <div class="c-fc-xblack c-pa c-p-lp50 c-translate-x-50 c-p-t28 c-pz100">
                <div v-if="item.type == 1" class="c-fs28 c-mt12 c-textAlign-c">兑换券</div>
                <div v-else-if="item.type == 4" class="c-fs28 c-mt12 c-textAlign-c">抵价券</div>
                <template v-else>
                  <p v-if="item.type == 5" class="c-textAlign-c"><span class="c-fs36 c-fw-b">{{(Number(item.price))}}<span class="c-fs22">折</span></span></p>
                  <p v-else class="c-textAlign-c"><span class="c-fs22">{{'￥' | iosPriceFilter}}<span class="c-fs36 c-fw-b">{{(Number(item.price)).toFixed(0)}}</span></span></p>
                  <p class="c-fc-gray c-fs18 c-textAlign-c">{{item.prodType == cfrom.shareholderPayVoucher ? '指定商品可用' : Number(item.amount) > 0 ? ('满' + item.amount + '元可用') : '无门槛'}}</p>
                </template>
              </div>
            </div>
          </div>
          <div class="c-ww170 c-hh70 c-p-b0 c-p-l0 c-pa c-pz100">
            <div class="c-ww170 c-hh70 c-p">
              <div class="c-fc-white c-ww170 c-pa c-p-lp50 c-translate-x-50 c-ph10 c-p-t24 c-pz100">
                <p class="c-fs24 c-textAlign-c c-text-ellipsis1 c-w100">{{item.prodType == cfrom.shareholderPayVoucher ? '代金券' : item.name}}</p>
              </div>
              <img class="c-ww170 c-hh70 c-pa c-p-b0 c-p-l0 c-pz10"
                :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/wqNIQ6OI5heuhir1CogAB6fq7HAAOs3c41KHOGn6.png')">
            </div>
          </div>
          <img class="c-ww170 c-hh140 c-pa c-p-b0 c-p-l0"
            :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-07/wtKTBhfHjWL6OByKSYLQlKNdo2jbkr637D7z4od5.png')">
        </div>
      </div>
    </div>
    <!-- 实体商品详情 -->
    <cj-popup v-if="vipList[selectedIndex]" v-model="isShowGoodsDetail" class="c-br20 c-w80">
      <div class="c-mt48 c-mb40 c-ph40 c-maxh400 c-contexty-scroll c-contextX-hidden c-ws-n">
        <div class="c-fs28 c-fc-sblack c-mb24 c-fw-b c-textAlign-c">{{vipList[selectedIndex].freeGoodName}}</div>
        <div class="goodsDetail" v-html="vipList[selectedIndex].freeGoodDesc"></div>
      </div>
      <div class="c-flex-row c-w100 c-aligni-center c-justify-center c-mb30">
        <div :style="'background-color:' + themeColorObj.color6 + ';color:' + themeColorObj.color5" @click="isShowGoodsDetail = false" class="c-fs22 c-ww220 c-hh50 c-flex-row c-aligni-center c-justify-center c-br30">
          <div>我知道了</div>
        </div>
      </div>
    </cj-popup>
    <cj-popup v-model="isShowGoodsList" class="c-w85 c-bg-transparent">
      <div class="c-w100" v-if="isFreeGood == 1 && vipList[selectedIndex].giftRelates && vipList[selectedIndex].giftRelates.length > 0">
        <!-- <div class="c-p dia-head-bg"> -->
        <img class="c-w100" src="../../../assets/i/wap/vip/vip-good-top.png" alt="">
        <!-- </div> -->
        <div class="dialog-mid c-w100">
          <div class="c-w100 c-ph40 c-maxh400 c-contexty-scroll">
            <!-- 实物赠送 -->
            <div v-for="(item, index) in vipList[selectedIndex].giftRelates" :key="index" :class="index == vipList[selectedIndex].giftRelates.length - 1 ? '' : 'c-mb20'" class="c-bg-white c-hh120 c-flex-row c-w100 c-br16 c-text-hidden">
              <div class="c-h c-ww124 c-flex-shrink0 c-flex-column c-justify-sb c-aligni-center c-fc-white c-p">
                <img class="c-w100 c-h" :src="$addXossFilter(item.relateCover, '../../../assets/defult270.png')" />
                <div v-if="item.stock == 0" class="c-fs24 c-fc-white c-translucent-balck70 c-h c-w100 c-pa c-p-l0 c-p-t0 c-pz9 c-flex-row c-flex-center">补货中</div>
              </div>
              <div class="c-flex-grow1 c-w0 c-flex-row c-justify-sb c-aligni-center c-ph14 c-pv16">
                <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb c-textAlign-l">
                  <!-- <div class="c-fs30 c-fc-xblack c-fw-b">赠送实物</div> -->
                  <div class="c-fs24 c-fw600 c-fc-xblack c-text-ellipsis1">{{item.relateName != null ? item.relateName :'实体商品'}}</div>
                </div>
                <div class="c-ww100 c-hh40 c-br20 c-fs22 c-fc-white c-flex-row c-flex-center c-flex-shrink0 c-ml24" @click="goShopDetail(item)" style="background: #AF7246;">查看</div>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-bottom c-w100 c-pt100">
          <img @click="isShowGoodsList = false" class="c-ww360 c-hh76 c-mlr-auto" src="../../../assets/i/wap/vip/confirm-btn.png" alt="">
        </div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    isFreeGood: {
      type: Number,
      default: 0
    },
    selectedIndex: {
      type: Number,
      default: 0
    },
    getPoint: {
      type: Number,
      default: 0
    },
    getCouponCount: {
      type: Number,
      default: 0
    },
    vipList: {
      type: Array,
      default: () => []
    },
    themeColorObj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      cfrom: global.ckFrom,
      isShowGoodsDetail: false, // 是否显示实体商品详情
      isShowGoodsList: false // 显示礼包实体商品列表（原来只能添加一个自定义商品，后改为可从商城中选多个，所以改成弹框展示）
    }
  },
  mounted() {
    this.isShowGoodsDetail = false; // 是否显示实体商品详情
    this.isShowGoodsList = false;
  },
  methods: {
    // 显示商品详细信息
    getGoodsDetail() {
      this.isShowGoodsDetail = true;
    },
    showGoodsList() {
      this.isShowGoodsList = true;
    },
    goShopDetail(goodsInfo) {
      this.$routerGo(this, "push", {
        path: '/mall/shopDetail/shopDetail',
        query: {
          shopNo: goodsInfo.relateId
        }
      })
    },
  }
}
</script>

<style scoped>
.goodsDetail >>> img {
  width: 100%;
}
.goodsDetail >>> p {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  color: #666666;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: left;
}
.goodsDetail >>> span {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  color: #666666;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: left;
}
.dialog-mid {
  background: url("../../../assets/i/wap/vip/vip-good-middle.png") repeat-y;
  background-size: 100% auto;
  /* padding-right: 0.4rem; */
}
.dialog-bottom {
  height: 5.25rem;
  background: url("../../../assets/i/wap/vip/vip-good-bottom.png") no-repeat;
  background-size: 100% 100%;
}
</style>
